<template>
  <HeadContainer :title="$t('title.creatorContract')" @back="backToPrev()">
    <div class="gap-col-16" style="overflow-y: scroll">
      <div class="contract">
        <div class="contract-scroll">
          <div class="font-size-12 text-graydisabled font-style-normal font-weight-400 line-height-120">
            <div>{{ $t('document.creator.contract.line1') }}</div>
            <div>{{ $t('document.creator.contract.line2') }}</div>
            <div>{{ $t('document.creator.contract.line3') }}</div>
            <div>
              {{ $t('document.creator.contract.line4') }}
            </div>
            <div>
              {{ $t('document.creator.contract.line5') }}
            </div>
          </div>
        </div>
      </div>
      <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 gap-col-16">
        <div>{{ $t('document.creator.explain.point1') }}</div>
        <div>{{ $t('document.creator.explain.point2') }}</div>
        <div>{{ $t('document.creator.explain.point3') }}</div>
        <div>{{ $t('document.creator.explain.point4') }}</div>
      </div>
      <div class="contact gap-col-16">
        <div class="text-white font-size-14 font-style-normal font-weight-400 line-height-140 letter-spacing-dot2">
          {{ $t('document.creator.tip.line1') }}
        </div>
        <div class="text-white font-size-14 font-style-normal font-weight-400 line-height-140 letter-spacing-dot2">
          {{ $t('document.creator.tip.line2') }}
          <span class="text-primary">support@fantasi.one</span>
          {{ $t('document.creator.tip.line3') }}
        </div>
      </div>
      <v-divider></v-divider>
      <BlockButton :label="$t('common.agree')" :is-gradient="false" @click="openValidation()"></BlockButton>
    </div>
  </HeadContainer>
</template>
<script setup>
import { whenever } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useBecomeCreatorDataStore } from '@/store/become-creator-data'
import { useBecomeCreatorRouteStore } from '@/store/become-creator-route'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import BlockButton from '@/components/button/BlockButton.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { BECOME_CREATOR_ROUTES, POPUP_DIALOG_TYPE } from '@/constant'

const routeStore = useBecomeCreatorRouteStore()
const { to } = routeStore
const { isActive } = storeToRefs(routeStore)

const dataStore = useBecomeCreatorDataStore()
const { profile } = storeToRefs(dataStore)

const { $popupDialog } = usePopupDialogStore()

const openValidation = () => {
  console.log('profile', profile.value)
  $popupDialog(POPUP_DIALOG_TYPE.BECOME_CREATOR_VALIDATION_WAY, {
    title: $t('label.validateWay'),
    confirm: (data) => {
      profile.value.country = data.country
      profile.value.identityType = data.identity
      to(BECOME_CREATOR_ROUTES.VERIFY_INFO)
    },
    cancel: () => {},
    confirmText: $t('common.continue'),
    cancelText: $t('common.cancel'),
    cancelLightTheme: true,
  }).open()
}

const emit = defineEmits(['backToPrev'])
const backToPrev = () => {
  emit('backToPrev')
}

const openSocialLink = () => {
  $popupDialog(POPUP_DIALOG_TYPE.BECOME_CREATOR_SOCIAL_LINK, {
    title: $t('title.socialAccount'),
    confirm: (data) => {
      console.log('data of social link dialog', data)
      profile.value.socialLinks.instagram = data.instagram?.value
      profile.value.socialLinks.twitter = data.twitter?.value
      profile.value.socialLinks.other = data.other?.value
      console.log('social links', profile.value.socialLinks)
    },
    cancel: backToPrev,
    confirmText: $t('common.continue'),
    cancelText: $t('common.back'),
    cancelLightTheme: true,
    showClose: false,
  }).open()
}

whenever(isActive, openSocialLink, { immediate: true })
</script>
<style scoped lang="scss">
.contract {
  border-radius: 0.625rem;
  border: 1px solid var(--color-text-disabled-gray, #d7d7d7);
}

.contract-scroll {
  max-height: 12.75rem;
  overflow-y: scroll;

  display: flex;
  width: 100%;
  padding: 1rem 0rem 1rem 0.5rem;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;

  border-radius: 0.625rem;
  background: var(--bg-blue, #181925);

  &::-webkit-scrollbar {
    display: flex;
    width: 1rem;
  }

  // &::-webkit-scrollbar-button {
  // }

  &::-webkit-scrollbar-track {
    box-shadow: transparent;

    // margin-top: 4.1875rem;
    // margin-bottom: 4.1875rem;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 0.09375rem;
    border: 0.35rem solid transparent;

    background: var(--color-primary-divider, rgba(215, 215, 215, 0.4));
    background-clip: content-box;
  }
}

.contact {
  padding: 1rem 1rem 0.9375rem 1rem;
  border-radius: 0.625rem;
  background: #333546;
}
</style>
